<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>有层次跳动导航栏</title>
		<link rel="icon" type="text/css" href="img/icon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		
		<style type="text/css">  
			
		    .navigation{
				width: 444px;
				height: 552px;
				margin-top: 50px;
				margin-left: 400px;
				padding-top: 30px;
				background-color: #dcdcdc;		
				text-align: center;
				overflow: hidden;
				position: relative;  
			}
			
			.navigation ul{
				width: 176px;
				height: 480px;
				/*position: absolute;
				right: -137px;*/
				transform: translateX(406px);
			}
					
			.navigation li{  
				width: 176px;
				height: 38px;	       
			    perspective: 200px;
			    background-color: white;
			    padding-bottom: 1px;
			    margin-bottom: 2px;
			    /*transition: all .3s;*/
			} 
			
			.navigation li span:first-child{
				display: inline-block;
				width: 38px;
				height: 37px;
				line-height: 37px;
				font-size: 15px;
				color: white;
				background-color: #0077a4;
			} 
			
			.navigation ul span:first-child:hover{
				background-color: #00ba2a;
			}
			
			.navigation ul span:last-child{
				display: inline-block;
				width: 137px;
				height: 37px;
				line-height: 37px;
				font-size: 13px;	
			}
			
			.navigation li span:last-child a{
				text-decoration:none;	
			}
			
			.navigation li span:last-child a:hover{
				color: #0076a4;
			}
					    
		
		    .navigation li:nth-child(1){  
		        -webkit-animation:LR 2.2s linear 0s infinite alternate;  
		    }  
		
		    .navigation li:nth-child(2){  
		        -webkit-animation:LR 2.2s linear 0.2s infinite alternate;  
		    }  
		
		    .navigation li:nth-child(3){  
		        -webkit-animation:LR 2.2s linear 0.4s infinite alternate;  
		    }  
		
		    .navigation li:nth-child(4){  
		        -webkit-animation:LR 2.2s linear 0.6s infinite alternate;  
		    }  
		
		    .navigation li:nth-child(5){  
		        -webkit-animation:LR 2.2s linear 0.8s infinite alternate;  
		    }  
		    
		    .navigation li:nth-child(6){  
		        -webkit-animation:LR 2.2s linear 1.0s infinite alternate;  
		    }  
		    
		    .navigation li:nth-child(7){  
		        -webkit-animation:LR 2.2s linear 1.2s infinite alternate;  
		    }  
			
			.navigation li:nth-child(8){  
		        -webkit-animation:LR 2.2s linear 1.4s infinite alternate;  
		    }  
		
		    .navigation li:nth-child(9){  
		        -webkit-animation:LR 2.2s linear 1.6s infinite alternate;  
		    }  
		
		    .navigation li:nth-child(10){  
		        -webkit-animation:LR 2.2s linear 1.8s infinite alternate;  
		    }  
		    
		    .navigation li:nth-child(11){  
		        -webkit-animation:LR 2.2s linear 2.0s infinite alternate;  
		    }  
		    
		    .navigation li:nth-child(12){  
		        -webkit-animation:LR 2.2s linear 2.2s infinite alternate;  
		    }  
		
		    @-webkit-keyframes LR  
		    {  
		        0%{  
		            transform: translateX(0px);  
		            /*color:#88e5fb;*/  
		        }  
		        50%{  
		            transform: translateX(-137px);  
		            /*color:blue;*/  
		        }  
		        100%{  
		            transform: translateX(-444px);  
		            /*color:#88e5fb;*/  
		        }  
		    }  
		
		</style>  
		
		<div class="navigation">
			<ul>
				<li>
					<span>0</span><span><a href="">站长素材</a></span>
				</li>
				<li>
					<span>1</span><span><a href="">书签切换</a></span>
				</li>
				<li>
					<span>2</span><span><a href="">幻灯片</a></span>
				</li>
				<li>
					<span>3</span><span><a href="">图片滚动-左</a></span>
				</li>
				<li>
					<span>4</span><span><a href="">图片滚动-上</a></span>
				</li>
				<li>
					<span>5</span><span><a href="">图片无缝滚动-左</a></span>
				</li>
				<li>
					<span>6</span><span><a href="">图片无缝滚动-上</a></span>
				</li>
				<li>
					<span>7</span><span><a href="">文字滚动-左</a></span>
				</li>
				<li>
					<span>8</span><span><a href="">文字滚动-上</a></span>
				</li>
				<li>
					<span>9</span><span><a href="">文字无缝滚动-左</a></span>
				</li>
				<li>
					<span>10</span><span><a href="">文字无缝滚动-上</a></span>
				</li>
				<li>
					<span>11</span><span><a href="">其他基础效果</a></span>
				</li>
			</ul>
		</div>
	</body>
</html>
